<template >
    <el-row > 
        <div style="display: flex;justify-content: center;margin-top: 150px">
            <el-card style="width: 560px">
                <div slot="header" class="clearfix">
                    <img src="/static/images/logo.jpg">
                    <span style="font-size: 25px;">欢迎登录云南师范大学信息学院</span><br>
                    <span style="font-size: 22px;">睿智楼机房实验室预约管理系统</span>
                </div>
                <!-- 表单 -->
                <table style="margin: 0 auto;">
                    <tr>
                        <td>账户：</td>
                        <td>
                            <el-input v-model="user.username" placeholder="请输入学号\工号"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <el-input type="password" v-model="user.password" placeholder="请输入密码"
                                @keydown.enter.native="doLogin"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <!-- 占两行-->
                        <td colspan="2">
                            <!-- 点击事件的两种不同的写法v-on:click和 @click-->
                            <el-button type="primary" round @click="doLogin">登录</el-button>
                            <el-button type="primary" round>注册</el-button>
                            <el-link type="primary" style="margin-left: 6px;">忘记密码</el-link>
                        </td>

                    </tr>
                </table>
            </el-card>
        </div>
        <!-- 轮播图 -->
         <!-- <div class="banner" style="margin-top: 30px;">
            <el-carousel :interval="3000" arrow="always" class="d_jump">
                <el-carousel-item v-for="item in imgList" :key="item.id" class="imgs">
                    <el-row>
                        <el-col :span="24"><img :src="item.idView" class="banner_img" /></el-col>
                    </el-row>
                </el-carousel-item>
            </el-carousel>
        </div>  -->
        <!-- 版权信息 -->
        <div class="button" style="margin-top: 30px;">
            <el-link type="info" >Copyright © 杜顺昌 | 1300442386@qq.com | 滇ICP备2021000850号</el-link>
        </div>
    </el-row>
</template>
<script>
    export default {
        //单页面中不支持前面的data:{}方式
        data() {
            //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
            return {
                // 图片需要引入, 否则无法显示
                imgList: [
                    { id: 0, idView: require('../../assets/3.jpg') },
                    { id: 1, name: '详情', idView: require('../../assets/2.jpg') },
                    { id: 2, name: '推荐', idView: require('../../assets/4.jpg') },
                    { id: 3, name: '推荐', idView: require('../../assets/5.jpg') },
                    { id: 4, name: '推荐', idView: require('../../assets/6.jpg') },
                    { id: 5, name: '推荐', idView: require('../../assets/8.jpg') },
                    { id: 6, name: '推荐', idView: require('../../assets/9.jpg') },
                    { id: 7, name: '推荐', idView: require('../../assets/11.jpg') }
                ],




                //之前是在里面直接写username，password等等，但是这里要写return
                //因为一个组件不管要不要被其他组件用，只要这样定义了，它就会认为可能这个组件会在其他的组件中使用
                //比如说在这里定义了一个变量，然后把这个组件引入到A组件中，A组件中修改了这个变量
                //同时这个组件也在B组件中引用了，这时候A里面一修改，B里面也变了，它们用的是一个值
                //可是一般来说可能希望在不同的组件中引用的时候，使用不同的值，所以这里要用return
                //这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
                user: {
                    username: '',
                    password: '',
                    //为了登录方便，可以直接在这里写好用户名和密码的值
                }
            }
        },


        methods: {
            doLogin() {//一点击登录按钮，这个方法就会执行
                alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
            }
        }
    }
</script>